<template>
	<div class="wrap">
		<!-- <header class="aui-bar aui-bar-nav aui-bar-light">
			<router-link to="/main/profile">
				<div class="go-back">
					<i></i>
					<i></i>
					<i></i>
				</div>
			</router-link>
				<div class="aui-title">签到有礼</div>
		</header> -->       
                            <!-- 解决滑动穿透问题 -->
		<div class="inner" :style="{overflow:model || model_integral?'hidden':'auto'}">
			<div class="wxhContainer">
				<div class="title">
					<span>我的积分：{{userintegral || 0}}</span>
					<div>
						<i class="icon njfont nj-yuyue"></i>
						<span @click="model=true;model_rewardDesc=true;">签到规则</span>
					</div>
				</div>
				<div class="medium" >
					<img  @click="submit()" :class="click ? 'click_img' : 'click'"   class="click_transition" src="static/image/prize/integral_1.png" alt="">
					<p class="click_p" @click="submit()">{{click ? '已签到' : '签到'}}</p>
				</div>
				<div>
					<span class="discribe">{{discribe.signName}}</span>
				</div>
			</div>

			<div class="main">
				<div class="img_box">
					<div class="btn_box">
						<div class="style_box" :style="{height:iosFlag?'2.5rem':'1.5rem'}"  v-for="(val, index) in discribe.signCycle"  :key="index">
                            <p class="signIntegral_p" ref="sign" v-if="show(index, 4)">+{{getScore(index)}}积分</p>
                            <img id="getGift" src="static/image/prize/btn05.png" alt="" v-if="show(index, 3)" @click="goPrize">
                            <img :src="show(index, 1)" :style="{height:iosFlag?'3.5rem':'1.3rem'}"  alt="" >
                            <p class="signIntegral_p_1">第{{index+1}}天</p>
                            <!-- <img id="gift" src="static/image/prize/btn06.png" alt="" v-if="show(index, 2)"> -->
                            <!-- :style="{marginLeft:iosFlag?'1rem':'0rem'}" -->
                            <div style="width:50%;height:100%;position:relative;top:-2.5rem;padding-left:0.15rem;">
                                <img id="gift"  src="static/image/prize/btn06.png" alt="" v-if="show(index, 2)">
                            </div>
						</div>
					</div>
					<div class="bgImg">

					</div>
				</div>
			</div>
		</div>
		<div class="rule_model" @click="model_integral=false;" v-if="model_integral" >
			<div class="rule_model_2">
                <span class="model_span_1">签到成功</span>
                <span class="model_span_2">+{{getScore(undefined,1)}}</span>
                <span class="model_span_3">{{span_show_1}}</span>
                <span class="model_span_4" @click="goPrize" v-if="span_show">立即抽奖</span>
                <span class="model_span_4" v-else >确定</span>
			</div>
		</div>
		<div class="rule_model"  @touchstart="hideModel" v-if="model">
			
		</div>
        <!-- @touchstart="stopDefault" -->
        <div class="rule_model_1" v-if="model_rewardDesc" @click="model=false;model_rewardDesc=false">
            <article v-html="discribe.signDesc" v-if="discribe.signDesc">
                
            </article>
            <article v-else>
                暂无数据!
            </article>
        </div>
	</div>
</template>
<script>
	import {
		getSignDetailCountByToday,//查询当天签到记录数量接口
		getEnableSignRule,//获取可用的签到活动
		getSignDetailByLatest,//获取某用户最新签到记录
		saveSignDetail,//提交某用户最新签到记录
		getUserIntegral,//查询用户积分
		getMonthHistorySignDetailList,//某用户签到历史记录
		getSignRewardToday//当天是否抽奖
	} from '../../api/wxh/getData.js';
    import {Toast} from '../../utils/toast.js';
    import { CHANGE_NAVIGATION,NAVIGATE } from '../../config/postMessage-types';
    import { mapGetters } from 'vuex';
	export default {
		data(){
			return {
				click: false,
				click_1: true,
				discribe:'',
				signRuleId:'',
				signDetail:'',
				saveSignDetail:'',
				userintegral: '',//用户积分
				model_integral: false,//弹出框
				model: false,
				model_rewardDesc: false,
				score: '',
                signRewardToday: '',//当天抽奖和是否有抽奖活动
				iosFlag:false,
			}
		},
		created(){
            let titleConfig = JSON.stringify({
                type: CHANGE_NAVIGATION,
                params: {
                    title: "签到有礼"
                }
            })
            setTimeout(() => {
                window.postMessage(titleConfig)
            },300)
            this.iosFlag = this.getIosVersion();
            console.log(this.iosFlag,'iosFlag')
            this.checkLogin();
            this.initData();
		}
        ,
        computed: {
            ...mapGetters('wxh', [
                'userInfo'
            ]),
            hasUserInfo() {
                return Object.keys(this.userInfo).length;
            },
            score_1:function(){
						return  this.signDetail && this.signDetail.continueSignDay > 1 ? '' : '积分';
			},
			span_show: function(){
				return  this.signRewardToday.havingPrize === 1 && this.signRewardToday.signRewardAccount === 0;
			},
			span_show_1: function(){
				// return this.span_show ? '已连续签到'+ (this.signDetail.continueSignDay || 0) +'天，可享满勤抽奖' : '已连续签到'+ (this.signDetail.continueSignDay || 0) +'天,再接再厉哦！'
				return this.saveSignDetail.itemMsg;
			}
        },
        watch: {
            hasUserInfo(newVal,oldVal) {
                if(newVal){
                    this.initData();
                }
            },
        },
		methods:{
            getIosVersion() {
                var u = navigator.userAgent, app = navigator.appVersion;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (isAndroid) {
                    //这个是安卓操作系统
                   var ua = navigator.userAgent.toLowerCase();
                    var version = null;
                    var reg = /android [\d._]+/gi;
                    var v_info = ua.match(reg);
                    version = (v_info + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, "."); //得到版本号4.2.2
                    version = parseInt(version.split('.')[0]);// 得到版本号第一位
                    if(Number(version) <= 5){
                        return true;
                    }else{
                        return false;
                    }
                }
                if (isIOS) {
            　　　　 //这个是ios操作系统
                    var ver = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
                    // ver = parseInt(ver[1], 10);
                    var IosVersion = (ver[1] || '0') + (ver[2] || '0') + (ver[3] || '0');
                    console.log(IosVersion,'系统版本')
                    if(Number(IosVersion) < 935) {
                        return true
                    }else {
                        return false
                    }
                }
            },
            hideModel(){
                this.model=false;
                this.model_rewardDesc=false;
                this.stopDefault();
            },
             //阻止浏览器默认行为触发的通用方法  
			stopDefault(e){  
				//防止浏览器默认行为(W3C)  阻止遮罩的滑动事件
				if(e && e.preventDefault){  
					console.log("789-------------------------")  
					e.preventDefault();  
				}  
				//IE中组织浏览器行为  
				else{  
					console.log("456------------------")  
					window.event.returnValue=false; //实际上在IE8以下，会报错
					return false; 
				}
				console.log("123----------------------")  
				// document.querySelector(".content").
			},
            //判断登录回传Rn
            checkLogin(){
                let sessionId = localStorage.getItem('sessionId');
                if(!sessionId){
                    let goBackIns = {
                        type: NAVIGATE,
                        params: {
                            screen: 'Login',
                            params:{
                                FromWeb: true
                            }
                        }
                    }
                    window.postMessage(JSON.stringify(goBackIns));
                }
                return;
            },
			async initData(){
				let [rem, req] = await Promise.all([getUserIntegral(), getEnableSignRule()])
				if(rem.returnCode == 1){
				 this.userintegral = rem.data[0].userintegral;
				}
				if(req.returnCode == 1){
					this.discribe = req.data[0];
					this.signRuleId = req.data[0].rid;
				}

				let [res, ref, rew] = await Promise.all([
					getSignDetailByLatest('signRuleId='+this.signRuleId),
					getMonthHistorySignDetailList('signRuleId='+this.signRuleId),
					getSignRewardToday('signRuleId='+this.signRuleId)
				]);

				if(res.returnCode == 1 && res.data[0]) {
					this.signDetail = res.data[0];
					this.logId = res.data[0].rid;
					let Time_1 = this.getTime(this.signDetail.signTm);
					let Time_2 = this.getTime(new Date().getTime());
					if(Time_1 === Time_2)this.click = true;
				}
				if(ref.returnCode == 1 && ref.data) {
						this.score = ref.data.reverse();
				}
				if(rew.returnCode == 1 && rew.data[0]) {
					this.signRewardToday = rew.data[0];
					console.log('hh', this.signRewardToday)
				}
			},
			async submit(){
				// this.model_integral = true;
				
				let req = await saveSignDetail('signRuleId='+this.signRuleId+'&signItemId='+(this.signDetail.itemId || ''));

				if(req.returnCode !== 0){
					this.click = true;
					this.saveSignDetail = req.data[0];
				  this.logId = req.data[0].rid;
					await getSignDetailByLatest('signRuleId='+this.signRuleId);
					this.model_integral = true;
					this.initData();
				}	else {
					Toast({
						width: '9rem',
						message: req.msg,
					  type: 'warn',
					  duration: window.api.alertTime_2
					})
				}
			},
			async goPrize(){
				if(this.saveSignDetail){
					this.saveSignDetail.havingPrize === 1
					?
					this.$router.push({path:'prize_1',query:{rewardCode:this.saveSignDetail.rewardCode,rid:this.logId,ruleId:this.signRuleId}})
					:
					Toast({
						message: '暂无抽奖活动！',
						type: 'warn',
						duration: api.alertTime_2
					});
				} else if(this.signRewardToday) {
					this.signRewardToday.havingPrize === 1
					?
					this.$router.push({path:'prize_1',query:{rewardCode:this.signRewardToday.rewardCode,rid:this.logId,ruleId:this.signRuleId}})
					:
					Toast({
						message: '暂无抽奖活动！',
						type: 'warn',
						duration: api.alertTime_2
					});
				}
				 // this.$router.push({path:'/main/prize',query:{rewardCode:"RE48816171212142828",rid:"1184"}})
			},
			show(index, type){
				if(!this.signDetail && !this.discribe)return
				if(type === 1){

					let imgUrl = "static/image/prize/btn02.png";
					if((index+1) <= this.signDetail.continueSignDay){imgUrl = "static/image/prize/btn03.png"};
					//黄色背景
					// if(index == 0 && this.signDetail.continueSignDay >= 1 ){imgUrl = "static/image/prize/btn07.png"};
					//蓝色背景
          // if(((index+1)%this.discribe.signCycle) == 0 && ((index+1)/this.discribe.signCycle) == 1){imgUrl = "static/image/prize/btn04.png"};
					return imgUrl;
				}
				if(type === 2){
					return ((index+1)%this.discribe.signCycle) === 0 &&this.signDetail.continueSignDay !== this.discribe.signCycle;
				}
				if(type === 3){

					return this.signRewardToday.havingPrize === 1 && this.signRewardToday.signRewardAccount === 0 && (index+1)===this.signDetail.continueSignDay;
				}
				if(type === 4){

					return index <= (this.signDetail.continueSignDay - 1)
				}
			},
			getTime(time) {
				let Timer = new Date(time);
				let Time_day = Timer.getDate();
				let Time_month = Timer.getMonth();
				let Time_year = Timer.getFullYear();
				let endTime = Number(String(Time_year) + String(Time_month) + String(Time_day));
				return endTime;
			},
			getScore(index, type) {

				let a = this.signDetail.continueSignDay;

				if(type == 1 && a){
                    return this.score[a-1].signIntegral
				}
				if(index <= (a - 1)) {
                    return this.score[index].signIntegral;
                }

			}
		}
		,
		filters: {

		}
	}
</script>
<style scoped>
	.wrap {
		width: 100%;
		height: 100%;
		background: #EF5423;
		overflow: hidden;
	}
	.inner {
		width: 100%;
		height: 100%;
		background: #EF5423;
        -webkit-overflow-scrolling:touch
	}
	.wxhContainer {
		width: 100%;
		background: url('../../../static/image/prize/bgimg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.title {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 88%;
		margin:auto;
		line-height: 2.5rem;
    color: #fff;
	}
	.medium {
		width: 100%;
		height: 8rem;
		position: relative;
	}
	.click {
		display: inline-block;
		height: 100%;
	}
	.click_img {
		display: inline-block;
		height: 100%;
		transform: rotate(360deg);
		-ms-transform: rotate(360deg);		/* IE 9 */
		-webkit-transform: rotate(360deg);	/* Safari and Chrome */
		-o-transform: rotate(360deg);		/* Opera */
		-moz-transform: rotate(360deg);		/* Firefox */
	}
	.click_transition{
		-webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
	}
	.click_p {
		position:absolute;
		top: 3rem;
        left: 50%;
		font-size: 1.5rem;
		color: #EF5423;
        width:7rem;
        transform: translateX(-50%);
	}
	.discribe {
    color: #fff;
    border-radius: 13px;
    background: rgba(0,0,0,0.1);
    display: inline-block;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 5px 15px;
	}
	.main {
		background: #EF5423;
		width: 100%;
		/*height: 60%;*/
		/*padding: 2rem 1rem 4rem 1rem;*/
	}
	.img_box {
		position: relative;
	}
	.cover {
		height: 22.7rem;
		position: absolute;
		background: #EF5423;
		width: 100%;
		bottom: 0;
		z-index: 888;
	}
	.cover_height_1 {
		height: 18.2rem;
	}
	.cover_height_1 {
		height: 13.6rem;
	}
	.btn_box {
		width: 100%;
		margin-top: -.5rem;
		display: flex;
		justify-content: baseline;
		flex-direction: row;
		flex-wrap: wrap;
		align-content:center;
		position: absolute;
		/* z-index: 999; */
		padding: 2rem 1rem 4rem 1rem;
	    background: #EF5423;
	}
	.style_box img {
		width: 2.3rem;
		height: 1.3rem;
		display: inline-block;
        align-self: center;
    }
    #giftImg {
        position: relative;
    }
	.style_box{
		width: 20%;
		/*flex-grow: 1;*/
		height: 1.5rem;
		margin-bottom:3rem;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.width{

	}
	.bgImg {
		width: 100%;
		height: auto;
	}
	.bgImg  img {
		width: 100%;
		height: 100%;
	}
	.signIntegral_p {
		position: absolute;
		width:100%;
		height: 1.2rem;
		font-size: 0.6rem;
		color: #fe4236;
		line-height: 1.2rem;
	}
	.signIntegral_p_1 {
		color: #fff;
		margin-top: 0.2rem;
	}
	#gift {
		position: relative;
		width: 1.5rem;
		height: 1.5rem;
		top: -0.6rem;
	}
	#getGift {
		position: absolute;
		top: -2rem;
		left: 50%;
		transform: translateX(-50%);
		width: 1.8rem;
		height: 2rem;
		animation-name:myfirst;
		animation-duration:2s;
		animation-timing-function:ease-in-out;
		animation-iteration-count:infinite;

	}
	@keyframes myfirst {
		0% {top:-2rem;}
		/*25% {top:-2.25rem;}*/
		50% {top:-2.5rem;}
		/*75% {top:-2.75em;}*/
		100% {top:-3em;}
	}
	.rule_model {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		z-index: 1000;
		top: 0;
		left: 0;
		color: #000;
		/*display: flex;*/
		/*justify-content: center;*/
	}
	.rule_model_1 {
		width: 80%;
		height: auto;
		max-height: 80%;
		margin: auto;
		background: rgba(255, 255, 255, 1);
		position: absolute;
		top: 50%;
		left: 50%;
        transform: translate3d(-50%, -50%, 0);
        transition: .2s;
        border-radius: 10px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        /*white-space: nowrap;*/
        word-break: break-all;
        min-height: 25%;
        text-align: left;
        padding: 1rem;
        z-index:1001;
	}
	.rule_model_2 {
		width: 70%;
		height: 30%;
		background: url('../../../static/image/prize/prize_01.png');
		background-repeat: no-repeat;
        background-size: 100% 100%;
		position: absolute;
		top: 50%;
		left: 50%;
        transform: translate3d(-50%, -50%, 0);
        transition: .2s;
        display: flex;
        flex-direction: column;
        justify-content: center;
	}

	.rule_model span {
		display: block;
		/*margin-top: 1rem;*/
		height: 1.5rem;
	}
	.model_span_1 {
		font-weight: 500;
		font-size:18px;
	}
	.model_span_2 {
		color: #fc2e2e;
	}
	.model_span_3 {
		color: #a29e9e;
	}
	.model_span_4 {
		color: #fff;
		background: url('../../../static/image/prize/prize_btn.png');
		background-repeat: no-repeat;
        background-size: 40% 100%;
        background-position: center;
        line-height: 1.5rem;
	}
	.article {
		position: absolute;
		top: 50%;
		transform: translateY(-50%)
	}

</style>
